<template>
	<view>
		<div id="tMap" style="width:100vw; height: 60vh"></div>
		<button @click="mapModel.hehe"> 颜色 </button>
		<view id="log"></view>
	</view>
</template>

<script module="mapModel" lang="renderjs">
	import mapUtils from './mapUtils';
	import dataSource from './data';
	import x2js from 'x2js'
	export default {
		data() {
			return {
				polylineColor: '#4ECC89',
				carSpeed: 5,
				_CarTrack: null,
				linePoint: [],
				line: null
			};
		},
		created() {
			mapUtils.scriptApi([
				'http://api.tianditu.gov.cn/api?v=4.0&tk=850a0d5a130dc1e37c51bceaf031af99',
				'http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js',
				'http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js',
				'http://lbs.tianditu.gov.cn/api/js4.0/opensource/data/point.js',
				'http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js',
			],()=> {
				this.initMap();
			})
		},
		mounted() {},
		methods: {
			initMap() {
				const _this = this
				let centerPoint = mapUtils.gcj02towgs84(118.138982, 24.53445)
				console.log(centerPoint)
				
				_this.map = new T.Map('tMap');
				
				const startMarker = new T.Marker(new T.LngLat(...centerPoint), {
					icon: new T.Icon({
						iconUrl: 'https://oss.wanguocar.com.cn/wanguo/vms_wcl_system/images/map-start.png',
						iconSize: new T.Point(30, 48)
						// iconAnchor: new T.Point(12, 31)
					})
				})
				_this.map.addOverLay(startMarker)
				
				_this.map.centerAndZoom(new T.LngLat(...centerPoint), 16);
				let _CarTrack = new T.CarTrack(_this.map, {
					interval: 500,
					speed: this.carSpeed,
					dynamicLine: true,
					polylinestyle: {
						color: this.polylineColor, 
						weight: 5, 
						opacity: 0.9,
					},
					carstyle: {
						display:true, 
						iconUrl:"https://oss.wanguocar.com.cn/wanguo/vms_wcl_system/images/car.png", 
						width:30, 
						height:30
					},
					// Datas: datas.features.map(function (obj, i) {
					// 	let coordinates = obj.geometry.coordinates;
					// 	let lnlat = new T.LngLat(coordinates[0], coordinates[1]);
					// 	if(i===0) {
					// 		_this.map.centerAndZoom(lnlat, 16);
					// 	}
					// 	return lnlat;
					// }),
					Datas: dataSource.hehe.rideRouteList.map(function (obj, i) {
						let point = mapUtils.gcj02towgs84(obj.gcjLongitude, obj.gcjLatitude)
						let lnlat = new T.LngLat(...point);
						if(i===0) {
							_this.map.centerAndZoom(lnlat, 18);
						}
						// _this.linePoint.push(lnlat)
						return lnlat;
					}),
					passOneNode(lnglat, index, length){
						console.log(lnglat, index, length)
						if(index === length) {
							_CarTrack.pause()
						}
					}
				})
				_CarTrack.start()
				this._CarTrack = _CarTrack
				
				setTimeout(()=> {
					_this.handleGeolocation()
					_this.addLine()
				}, 1000)
				
			},
			addLine() {
				if(!this.line) {
					this.line = new T.Polyline([]);
					this.map.addOverLay(this.line);
				}
				this.line.setLngLats(this.linePoint)
			},
			handleGeolocation() {
				const _this = this
				let lo = new T.Geolocation();
				let index = 0
				let fn = function (e) {
					console.log(e, this.getStatus())
					if (this.getStatus() == 0){
						_this.map.centerAndZoom(e.lnglat, 18)
						// alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
						// let marker = new T.Marker(e.lnglat);
						// _this.map.addOverLay(marker);
						index++
						_this.log('log', `获取定位坐标：${index} - ${e.lnglat.lat} -  ${e.lnglat.lng}`)
						
						_this.linePoint.push(e.lnglat)
						_this.addLine()
					}
					if(this.getStatus() == 1){
						_this.map.centerAndZoom(e.lnglat, e.level)
						// alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
						var marker = new T.Marker(e.lnglat);
						_this.map.addOverLay(marker);
					}
				}
				setInterval(()=> {
					lo.getCurrentPosition(fn);
				}, 3000)
			},
			hehe() {
				this.polylineColor = "#42A5FB"
				this.carSpeed = 10
				
				console.log(this._CarTrack)
				
				this._CarTrack.setOptions({
					polylinestyle: {
						color: "#42A5FB", 
						weight: 5, 
						opacity: 0.9,
					},
				})
				
				console.log(new x2js());
				const bcStatus = '<bc-status>true</bc-status>'
				const value = new x2js().xml2js(dataSource.aaaaa)
				console.log(value);
				
			},
			log(id, content) {
				try {
					document.getElementById(id).textContent = content
				} catch (e) {}
			},
		}
	}
</script>

<style lang="scss">

</style>